<template>
  <el-form ref="userRef" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="手机号码:" prop="uPhonenum">
      <el-input v-model="form.uPhonenum" maxlength="11"/>
    </el-form-item>
    <el-form-item label="用户邮箱:" prop="uEmail">
      <el-input v-model="form.uEmail" maxlength="50"/></el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {defineProps, ref} from 'vue'
import requestUtil from '@/util/request'
import {ElMessage} from 'element-plus'
import store from '@/store'

const props = defineProps({
  user: {
    type:Object,
    default:()=>{},
    required:true
  }
})

const form=ref({
  uId:-1,
  uPhonenum:'',
  uEmail : ''
})

const userRef=ref(null)

const rules = ref({
  uEmail: [{required:true,message:"邮箱地址不能为空",trigger:"blur"}, { type:"email", message:'请输入正确的邮箱地址',trigger:["blur", "change"]}],
  uPhonenum: [{required: true,message:'手机号码不能为空',trigger:"blur"},{pattern:/^1[3/4/5/6/7/8/9][0-9]\d{8}$/,message:"请输入正确的手机号码",trigger : "blur"}]
});

form.value=props.user

const handleSubmit = () => {
  userRef.value.validate(async (valid)=>{
    console.log(form.value)
    let res = await requestUtil.put('api/user/update', form.value)
    const data = res.data
    if (data.status == 200) {
      ElMessage.success(data.message)
      store.commit('SET_UERINFO', form.value)
    }

  })
}
</script>

<style lang="scss" scoped>

</style>